<template>
  <view class="modal" v-if="visible">
    <!-- 蒙版 -->
    <view class="mask" :class="{ 'mask-show': visible }" @click="handleCancel"></view>
    <!-- 弹框内容 -->
    <view class="modal-content" :class="{ 'content-show': visible }">
      <!-- 标题 -->
      <!-- <view class="modal-title" v-if="title">{{ title }}</view> -->
      <view class="modal-top-img">
        <image
          class="top-img"
          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250401/9f9b1e33d1a9f85f382c0f3376250c53.png"
          mode="widthFix"
        ></image>
      </view>
      <!-- 内容 -->
      <view class="modal-body">

        <slot>{{ `您已获得了 ${number} 个赞` }}</slot>
      </view>
      <!-- 按钮区域 -->
      <view class="modal-footer">
        <!-- <view class="btn cancel" @click="handleCancel" v-if="showCancel">{{ cancelText }}</view> -->
        <view class="btn confirm" @click="handleConfirm">{{ confirmText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: String,
      default: ''
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    number: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm');
    },
    handleCancel() {
      this.$emit('cancel');
    },
  }
}
</script>

<style lang="scss" scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease-out;
    
    &.mask-show {
      background-color: rgba(0, 0, 0, 0.6);
    }
  }

  .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    width: 640rpx;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    transition: all 0.3s ease-out;

    &.content-show {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }

    .modal-title {
      padding: 30rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      border-bottom: 1rpx solid #eee;
    }
 
    .modal-body {
      padding: 25rpx;
      font-size: 28rpx;
      color: #666;
      text-align: center;
    }

    .modal-footer {
      display: flex;
      border-top: 1rpx solid #eee;

      .btn {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 32rpx;
        transition: background-color 0.2s ease;

        &:active {
          background-color: #f5f5f5;
        }

        &.cancel {
          color: #666;
          border-right: 1rpx solid #eee;
        }

        &.confirm {
          color: #3d3d3d;
        }
      }
    }
  }
}
.modal-top-img {
  width: 640rpx;
  height: 274rpx;
}
.top-img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  transition: opacity 0.3s ease;
  
  &[src] {
    opacity: 1;
  }
}
</style>